<template>
  <ul v-if="ubaInfoListPages && ubaInfoListPages.length">
    <li class="ui-time-line" :class="{isStartPage: item.isStartPage}" v-for="item in ubaInfoListPages">
      <el-tooltip v-if="item.isStartPage" class="tooltip" :content="$t('webchat.visitorEnter')" placement="left">
        <el-button></el-button>
      </el-tooltip>
      <div class="time_line_box">
        <span class="uba_time_warp">{{item.timeStart ? item.timeStart : ' '}}</span>
        <span class="uba_page_stay" style="color: #ff9100">{{item.stayTimeDesc}}</span>
        <span class="currentUrl_warp" :class="{currentUrl_warp_Invite: isInvite}">
        <a :href="item.currentUrl" target="_blank">{{item.title}}</a>
      </span>
      </div>
    </li>
  </ul>
</template>
<script>
  export default {
    name: 'webChatTimeLine',
    props: {
      ubaInfoListPages: Array,
      isInvite: Boolean
    },
    data () {
      return {
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .ui-time-line
    margin-top 14px
    position relative
    color $cf-gray3
    z-index 10
    &:before
      content ""
      width 12px
      height 12px
      display inline-block
      margin 4px 12px 0 0
      border-radius 6px
      background-color $c-his-border
      z-index 10
      float left
    &:after
      content ""
      width 1px
      height calc(100% + 10px)
      display inline-block
      position absolute
      top 10px
      left 5.5px
      margin-right 12px
      border-radius 6px
      z-index -1
      background-color $c-his-border
    &:last-child
      &:after
        width 0
        height 0
  .isStartPage
    &:before
      background-color $c-line
  .fade-enter-active,
  .fade-leave-active
    transition all 0.5s ease
   .fade-enter,
   .fade-leave-active
    opacity 0
  .tooltip
    background transparent !important
    border none
    position absolute
    left -7px
    top -3px
  .time_line_warp
    max-height 170px
    overflow-y auto
    padding-bottom 10px
  .uba_page_stay
    font-size 12px
    position absolute
    left 25px
    top 15px
  .uba_time_warp
    display block
    width 70px
  .currentUrl_warp
    display block
    padding-left 5px
    width 220px
    word-break break-all
  .currentUrl_warp_Invite
    width auto
    margin-right 20px
  .time_line_box
    display flex
    min-height 30px
</style>
